<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #put{
            color: rosybrown;
            border: 1px solid red;
            font-size: 30px;
        }
    </style>
    <label>
        <input id="put">
    </label>
    <button type="button" id="abc">获取样式</button>
    <button type="button" id="123">设置样式</button>
</head>
<body>
<script>
    let ipt=document.querySelector('#put');
    document.querySelector('#abc').onclick=()=>{
        //可以获取行间样式，无法获取非行间样式
        console.log('行间样式color',ipt.style['color']);
        console.log('非行间样式fontSize',ipt.style['fontSize']);
        //可以获取行间样式和非行间样式
        console.log('行间样式color',getComputedStyle(ipt)['color']);
        console.log('非行间样式fontSize',getComputedStyle(ipt)['fontSize']);

    };
    //设置CSS样式
    document.querySelector('#123').onclick=()=>{
        ipt.style['color']='red';
        ipt.style['fontSize']='40px';

    }
</script>
</body>
</html>